<template>
	<el-card class="box-card">
		<el-steps :active="4" align-center>
		  <el-step title="基础信息"></el-step>
		  <el-step title="活动图片"></el-step>
		  <el-step title="活动时间"></el-step>
		  <el-step title="活动简介"></el-step>
		  <el-step title="补充说明"></el-step>
		  <el-step title="免费体验"></el-step>
		</el-steps>
		<el-row class="box-row">
			<el-form :model="formData" ref="formData" :rules="rules">
				<el-form-item class="title" style="width:50%;margin: 20px auto;">
					<el-col :span="24">补充说明</el-col>
				</el-form-item>
				<el-form-item  prop="arriveTime">
					<el-select v-model="formData.arriveTime" placeholder="选择到场时间" style="width:50%">
						<el-option v-for="item in arriveTimeList" :key="item" :label="item" :value="item">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item  prop="memo">
					<el-input v-model="formData.memo" placeholder="附加描述" style="width:50%"></el-input>
				</el-form-item>
				<el-form-item  prop="isCancel">
					<el-select v-model="formData.isCancel" placeholder="选择取消课程时间" style="width:50%">
						<el-option v-for="item in cancelList" :key="item.id" :label="item.value" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item  prop="needParents">
					<el-switch v-model="formData.needParents" on-color="#13ce66" off-color="#ff4949" active-value="1" inactive-value="0">
					</el-switch>是否需要陪护
				</el-form-item>
			</el-form>
			<el-button type="primary" style="width:50%;margin-top: 10px;" @click="submitForm('formData')">下一步</el-button>
		</el-row>
	</el-card>
</template>

<script>
	import { courseUpdate ,courseInfo} from "@/api/getData"
	export default {
		data() {
			
			return {

				formData: {
					memo:"",
					needParents:"0",
					arriveTime:"",
					isCancel:"",
					id: "",
					currentStep:"5",
				},
				arriveTimeList: ["按时到即可", "提前10分钟", "提前30分钟", "提前1小时", "提前2小时"],
				cancelList: [{
						id: 0,
						value: "不可取消"
					},
					{
						id: 24,
						value: "课程开始前24小时"
					},
					{
						id: 48,
						value: "课程开始前48小时"
					},
				],
				rules:{
					memo:[
			            { required: true, message: '请输入附加描述', trigger: 'blur' },
			            { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
			        ],
			        isCancel:[
			            { required: true, message: '请选择选择取消课程时间', trigger: 'change' },
			        ],
			        arriveTime:[
			            { required: true, message: '请选择到场时间', trigger: 'change' },
			        ],

				},
			}
		},

		created() {
			this.formData.id = this.$route.query.id;
			if(this.formData.id != undefined && this.formData.id != ""){
				this.courseInfo(this.formData.id);
			}
		},
		methods: {
			async courseInfo(id) {
				const res = await courseInfo({
					id: id,
				});
				if(res.code == "0") {
					if(res.obj.needParents != null){
						this.formData.needParents = res.obj.needParents.toString();
					}
					this.formData.arriveTime = res.obj.arriveTime;
					this.formData.isCancel = res.obj.isCancel;
					this.formData.memo = res.obj.memo;
				} else {
					this.$notify.error({
						title: '错误',
						message: res.msg,
						offset: 100
					});
				}
			},
			async submitForm(formName) {
				this.$refs[formName].validate(async(valid) => {
					if(valid) {
						let res = await courseUpdate(this.formData);
						if(res.code == "0") {
							this.$router.push({
								path: 'activitySix',
								query: {
									id: this.formData.id,
									businessId:this.$route.query.businessId
								}
							})
						} else {
							this.$notify.error({
								title: '错误',
								message: res.msg,
								offset: 100
							});
						}
					}
				});
			},
		},
	}
</script>

<style>
	.box-card {
		margin: 0 10px;
	}
	.title {
		background-color: #20a0ff;
		line-height: 60px;
		font-size: 18px;
		color: #fff;
	}
	.box-row{
		margin: 20px auto;
		width:100%;
		text-align: center;
	}
</style>